<template>
  <div class="template-list-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">模板中心</h1>
          <p class="page-subtitle">精选高质量页面模板，快速构建您的应用</p>
        </div>
        <div class="header-right">
          <el-button type="primary" :icon="Plus" @click="createTemplate">
            创建模板
          </el-button>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-card class="filter-card">
        <div class="filter-content">
          <!-- 搜索框 -->
          <div class="search-area">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索模板名称、标签或描述..."
              size="large"
              :prefix-icon="Search"
              clearable
              @input="handleSearch"
              class="search-input"
            />
          </div>

          <!-- 筛选条件 -->
          <div class="filter-controls">
            <div class="filter-group">
              <label class="filter-label">分类：</label>
              <el-select 
                v-model="selectedCategory" 
                placeholder="全部分类" 
                clearable
                @change="handleCategoryChange"
                class="filter-select"
              >
                <el-option 
                  v-for="category in categories" 
                  :key="category.value" 
                  :label="category.label" 
                  :value="category.value"
                />
              </el-select>
            </div>

            <div class="filter-group">
              <label class="filter-label">标签：</label>
              <el-select 
                v-model="selectedTags" 
                placeholder="选择标签" 
                multiple 
                clearable
                @change="handleTagsChange"
                class="filter-select"
              >
                <el-option 
                  v-for="tag in availableTags" 
                  :key="tag" 
                  :label="tag" 
                  :value="tag"
                />
              </el-select>
            </div>

            <div class="filter-group">
              <label class="filter-label">排序：</label>
              <el-select 
                v-model="sortBy" 
                @change="handleSortChange"
                class="filter-select"
              >
                <el-option label="最新发布" value="newest" />
                <el-option label="最受欢迎" value="popular" />
                <el-option label="评分最高" value="rating" />
                <el-option label="使用最多" value="usage" />
              </el-select>
            </div>

            <div class="view-controls">
              <el-button-group>
                <el-button 
                  :type="viewMode === 'grid' ? 'primary' : ''"
                  :icon="Grid"
                  @click="viewMode = 'grid'"
                />
                <el-button 
                  :type="viewMode === 'list' ? 'primary' : ''"
                  :icon="List"
                  @click="viewMode = 'list'"
                />
              </el-button-group>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 统计信息 -->
    <div class="stats-bar">
      <div class="stats-content">
        <span class="stats-text">
          共找到 <strong>{{ filteredTemplates.length }}</strong> 个模板
        </span>
        <div class="stats-tags">
          <el-tag 
            v-for="tag in selectedTags" 
            :key="tag"
            closable
            @close="removeTag(tag)"
            class="selected-tag"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 模板列表 -->
    <div class="templates-container">
      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="grid-view">
        <el-row :gutter="24">
          <el-col 
            :xl="6" :lg="8" :md="12" :sm="24"
            v-for="template in paginatedTemplates" 
            :key="template.id"
            class="template-col"
          >
            <el-card 
              class="template-card"
              :class="{ featured: template.featured }"
              @click="viewTemplate(template)"
            >
              <!-- 模板预览图 -->
              <div class="template-preview">
                <img 
                  :src="template.preview" 
                  :alt="template.name"
                  class="preview-image"
                  @error="handleImageError"
                />
                <div class="preview-overlay">
                  <div class="overlay-actions">
                    <el-button 
                      type="primary" 
                      :icon="View" 
                      @click.stop="previewTemplate(template)"
                      circle
                    />
                    <el-button 
                      type="success" 
                      :icon="Download" 
                      @click.stop="useTemplate(template)"
                      circle
                    />
                  </div>
                </div>
                <div v-if="template.featured" class="featured-badge">
                  <el-icon><Star /></el-icon>
                  精选
                </div>
              </div>

              <!-- 模板信息 -->
              <div class="template-info">
                <div class="template-header">
                  <h3 class="template-name">{{ template.name }}</h3>
                  <div class="template-rating">
                    <el-rate 
                      v-model="template.rating" 
                      disabled 
                      show-score 
                      size="small"
                      class="rating-stars"
                    />
                  </div>
                </div>
                
                <p class="template-description">{{ template.description }}</p>
                
                <div class="template-tags">
                  <el-tag 
                    v-for="tag in template.tags" 
                    :key="tag"
                    size="small"
                    class="template-tag"
                  >
                    {{ tag }}
                  </el-tag>
                </div>

                <div class="template-meta">
                  <div class="meta-item">
                    <el-icon size="14"><User /></el-icon>
                    <span>{{ template.author }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon size="14"><Calendar /></el-icon>
                    <span>{{ formatDate(template.createdAt) }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon size="14"><Download /></el-icon>
                    <span>{{ template.downloads }}</span>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="template-actions">
                <el-button 
                  type="primary" 
                  @click.stop="useTemplate(template)"
                  class="use-btn"
                >
                  使用模板
                </el-button>
                <el-dropdown trigger="click" @command="(command) => handleAction(template, command)">
                  <el-button :icon="MoreFilled" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="preview">
                        <el-icon><View /></el-icon>
                        预览
                      </el-dropdown-item>
                      <el-dropdown-item command="favorite">
                        <el-icon><StarFilled /></el-icon>
                        收藏
                      </el-dropdown-item>
                      <el-dropdown-item command="share">
                        <el-icon><Share /></el-icon>
                        分享
                      </el-dropdown-item>
                      <el-dropdown-item command="report" divided>
                        <el-icon><Flag /></el-icon>
                        举报
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 列表视图 -->
      <div v-if="viewMode === 'list'" class="list-view">
        <el-table 
          :data="paginatedTemplates" 
          style="width: 100%"
          @row-click="viewTemplate"
          class="template-table"
        >
          <el-table-column width="100">
            <template #default="{ row }">
              <div class="table-preview">
                <img 
                  :src="row.preview" 
                  :alt="row.name"
                  class="table-preview-image"
                  @error="handleImageError"
                />
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="模板名称" min-width="200">
            <template #default="{ row }">
              <div class="template-title">
                <h4>{{ row.name }}</h4>
                <p class="template-subtitle">{{ row.description }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="分类" width="120">
            <template #default="{ row }">
              <el-tag type="info">{{ row.category }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="标签" width="200">
            <template #default="{ row }">
              <div class="table-tags">
                <el-tag 
                  v-for="tag in row.tags.slice(0, 2)" 
                  :key="tag"
                  size="small"
                  class="table-tag"
                >
                  {{ tag }}
                </el-tag>
                <span v-if="row.tags.length > 2" class="more-tags">
                  +{{ row.tags.length - 2 }}
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="评分" width="120">
            <template #default="{ row }">
              <el-rate 
                v-model="row.rating" 
                disabled 
                size="small"
                class="table-rating"
              />
            </template>
          </el-table-column>

          <el-table-column label="下载量" width="100">
            <template #default="{ row }">
              <span class="download-count">{{ row.downloads }}</span>
            </template>
          </el-table-column>

          <el-table-column label="作者" width="120">
            <template #default="{ row }">
              <div class="author-info">
                <el-avatar :size="24" class="author-avatar">
                  {{ row.author.charAt(0) }}
                </el-avatar>
                <span>{{ row.author }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <div class="table-actions">
                <el-button 
                  type="primary" 
                  size="small"
                  @click.stop="useTemplate(row)"
                >
                  使用
                </el-button>
                <el-button 
                  size="small"
                  :icon="View"
                  @click.stop="previewTemplate(row)"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 48, 96]"
        :total="filteredTemplates.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="template-pagination"
      />
    </div>

    <!-- 模板预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      :title="selectedTemplate?.name"
      width="80%"
      class="preview-dialog"
      @close="closePreview"
    >
      <div v-if="selectedTemplate" class="preview-content">
        <div class="preview-header">
          <div class="preview-info">
            <h2>{{ selectedTemplate.name }}</h2>
            <p>{{ selectedTemplate.description }}</p>
            <div class="preview-meta">
              <el-tag>{{ selectedTemplate.category }}</el-tag>
              <el-rate v-model="selectedTemplate.rating" disabled size="small" />
              <span class="download-info">{{ selectedTemplate.downloads }} 次下载</span>
            </div>
          </div>
        </div>
        
        <div class="preview-image-container">
          <img 
            :src="selectedTemplate.preview" 
            :alt="selectedTemplate.name"
            class="preview-full-image"
          />
        </div>
        
        <div class="preview-details">
          <h3>模板特性</h3>
          <ul class="feature-list">
            <li v-for="feature in selectedTemplate.features" :key="feature">
              <el-icon><Check /></el-icon>
              {{ feature }}
            </li>
          </ul>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closePreview">关闭</el-button>
          <el-button type="primary" @click="useTemplate(selectedTemplate)">
            使用此模板
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import {
  Plus,
  Search,
  Grid,
  List,
  View,
  Download,
  Star,
  StarFilled,
  User,
  Calendar,
  MoreFilled,
  Share,
  Flag,
  Check
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('')
const selectedTags = ref([])
const sortBy = ref('newest')
const viewMode = ref('grid')
const currentPage = ref(1)
const pageSize = ref(12)
const previewVisible = ref(false)
const selectedTemplate = ref(null)

// 分类选项
const categories = [
  { label: '管理后台', value: 'admin' },
  { label: '数据展示', value: 'dashboard' },
  { label: '表单页面', value: 'form' },
  { label: '列表页面', value: 'list' },
  { label: '详情页面', value: 'detail' },
  { label: '用户中心', value: 'user' },
  { label: '电商页面', value: 'ecommerce' },
  { label: '博客页面', value: 'blog' }
]

// 可用标签
const availableTags = [
  'Vue3', 'Element Plus', '响应式', '暗色主题', '图表', 
  '表格', '表单', '卡片', '导航', '侧边栏', '头部',
  '移动端', 'TypeScript', 'Pinia', 'Vue Router'
]

// 模板数据
const templates = reactive([
  {
    id: 1,
    name: '现代化管理后台',
    description: '基于 Vue3 + Element Plus 的现代化管理后台模板，包含完整的权限管理和数据展示功能',
    category: 'admin',
    tags: ['Vue3', 'Element Plus', '响应式', '权限管理'],
    preview: 'https://picsum.photos/400/300?random=1',
    author: '张三',
    rating: 4.8,
    downloads: 1234,
    createdAt: new Date('2024-01-15'),
    featured: true,
    features: [
      '响应式设计，支持多种设备',
      '完整的权限管理系统',
      '丰富的图表组件',
      '暗色主题支持',
      '国际化支持'
    ]
  },
  {
    id: 2,
    name: '数据仪表板',
    description: '专业的数据可视化仪表板，支持多种图表类型和实时数据更新',
    category: 'dashboard',
    tags: ['图表', 'ECharts', '实时数据', 'Vue3'],
    preview: 'https://picsum.photos/400/300?random=2',
    author: '李四',
    rating: 4.6,
    downloads: 856,
    createdAt: new Date('2024-02-10'),
    featured: false,
    features: [
      '多种图表类型支持',
      '实时数据更新',
      '交互式图表操作',
      '数据导出功能',
      '自定义主题配置'
    ]
  },
  {
    id: 3,
    name: '电商商品管理',
    description: '完整的电商商品管理系统，包含商品列表、编辑、库存管理等功能',
    category: 'ecommerce',
    tags: ['电商', '商品管理', '表格', '表单'],
    preview: 'https://picsum.photos/400/300?random=3',
    author: '王五',
    rating: 4.7,
    downloads: 642,
    createdAt: new Date('2024-03-05'),
    featured: true,
    features: [
      '商品信息管理',
      '库存实时监控',
      '批量操作支持',
      '图片上传预览',
      '价格策略配置'
    ]
  },
  {
    id: 4,
    name: '用户中心页面',
    description: '完整的用户中心页面模板，包含个人信息、设置、安全等模块',
    category: 'user',
    tags: ['用户中心', '个人设置', '表单', '卡片'],
    preview: 'https://picsum.photos/400/300?random=4',
    author: '赵六',
    rating: 4.5,
    downloads: 423,
    createdAt: new Date('2024-03-20'),
    featured: false,
    features: [
      '个人信息管理',
      '头像上传裁剪',
      '安全设置',
      '消息通知配置',
      '账户绑定管理'
    ]
  },
  {
    id: 5,
    name: '博客文章列表',
    description: '优雅的博客文章列表页面，支持分类筛选、标签搜索和分页',
    category: 'blog',
    tags: ['博客', '文章列表', '搜索', '分页'],
    preview: 'https://picsum.photos/400/300?random=5',
    author: '孙七',
    rating: 4.4,
    downloads: 567,
    createdAt: new Date('2024-04-01'),
    featured: false,
    features: [
      '文章列表展示',
      '分类标签筛选',
      '全文搜索功能',
      '作者信息展示',
      '阅读统计显示'
    ]
  },
  {
    id: 6,
    name: '表单向导页面',
    description: '多步骤表单向导，适用于复杂表单的分步填写和提交',
    category: 'form',
    tags: ['表单', '向导', '分步', 'Vue3'],
    preview: 'https://picsum.photos/400/300?random=6',
    author: '周八',
    rating: 4.9,
    downloads: 789,
    createdAt: new Date('2024-04-15'),
    featured: true,
    features: [
      '多步骤表单向导',
      '表单验证提示',
      '数据自动保存',
      '步骤进度显示',
      '返回修改支持'
    ]
  }
])

// 计算属性
const filteredTemplates = computed(() => {
  let result = templates

  // 搜索过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(template => 
      template.name.toLowerCase().includes(keyword) ||
      template.description.toLowerCase().includes(keyword) ||
      template.tags.some(tag => tag.toLowerCase().includes(keyword))
    )
  }

  // 分类过滤
  if (selectedCategory.value) {
    result = result.filter(template => template.category === selectedCategory.value)
  }

  // 标签过滤
  if (selectedTags.value.length > 0) {
    result = result.filter(template => 
      selectedTags.value.every(tag => template.tags.includes(tag))
    )
  }

  // 排序
  switch (sortBy.value) {
    case 'newest':
      result.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      break
    case 'popular':
      result.sort((a, b) => b.downloads - a.downloads)
      break
    case 'rating':
      result.sort((a, b) => b.rating - a.rating)
      break
    case 'usage':
      result.sort((a, b) => b.downloads - a.downloads)
      break
  }

  return result
})

const paginatedTemplates = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTemplates.value.slice(start, end)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleCategoryChange = () => {
  currentPage.value = 1
}

const handleTagsChange = () => {
  currentPage.value = 1
}

const handleSortChange = () => {
  currentPage.value = 1
}

const removeTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  }
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const viewTemplate = (template) => {
  ElMessage.info(`查看模板: ${template.name}`)
}

const previewTemplate = (template) => {
  selectedTemplate.value = template
  previewVisible.value = true
}

const closePreview = () => {
  previewVisible.value = false
  selectedTemplate.value = null
}

const useTemplate = (template) => {
  ElMessageBox.confirm(
    `确定要使用模板 "${template.name}" 吗？这将创建一个新的页面。`,
    '使用模板',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    ElMessage.success(`正在使用模板: ${template.name}`)
    // 这里可以添加使用模板的逻辑
  }).catch(() => {
    ElMessage.info('已取消')
  })
}

const createTemplate = () => {
  ElMessage.info('跳转到创建模板页面')
  // 这里可以添加路由跳转逻辑
}

const handleAction = (template, action) => {
  switch (action) {
    case 'preview':
      previewTemplate(template)
      break
    case 'favorite':
      ElMessage.success(`已收藏模板: ${template.name}`)
      break
    case 'share':
      ElMessage.info(`分享模板: ${template.name}`)
      break
    case 'report':
      ElMessage.warning(`举报模板: ${template.name}`)
      break
  }
}

const handleImageError = (event) => {
  event.target.src = ''
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 生命周期
onMounted(() => {
  // 可以在这里加载模板数据
})
</script>

<style scoped>
.template-list-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
  position: relative;
}

.template-list-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(103, 194, 58, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.template-list-page > * {
  position: relative;
  z-index: 1;
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.header-right {
  flex-shrink: 0;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 24px;
}

.filter-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.filter-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-area {
  display: flex;
  justify-content: center;
}

.search-input {
  max-width: 600px;
  width: 100%;
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

.filter-select {
  min-width: 140px;
}

.view-controls {
  margin-left: auto;
}

/* 统计栏 */
.stats-bar {
  margin-bottom: 16px;
  padding: 12px 0;
}

.stats-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-text {
  font-size: 14px;
  color: #666;
}

.stats-tags {
  display: flex;
  gap: 8px;
}

.selected-tag {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

/* 模板容器 */
.templates-container {
  margin-bottom: 32px;
}

/* 网格视图 */
.grid-view {
  margin-bottom: 24px;
}

.template-col {
  margin-bottom: 24px;
}

.template-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.template-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.12),
    0 8px 20px rgba(0,0,0,0.08);
}

.template-card.featured {
  border: 2px solid #ffd700;
}

.template-preview {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.template-card:hover .preview-image {
  transform: scale(1.1);
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.template-card:hover .preview-overlay {
  opacity: 1;
}

.overlay-actions {
  display: flex;
  gap: 12px;
}

.featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffd700;
  color: #333;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-info {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.template-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}

.template-rating {
  flex-shrink: 0;
}

.rating-stars {
  margin-left: 8px;
}

.template-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}

.template-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.template-tag {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  border: 1px solid rgba(64, 158, 255, 0.2);
  font-size: 12px;
}

.template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
  color: #999;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 20px 20px;
}

.use-btn {
  flex: 1;
}

/* 列表视图 */
.list-view {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
}

.template-table {
  border-radius: 16px;
}

.table-preview {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}

.table-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-title h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.template-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.table-tags {
  display: flex;
  gap: 4px;
  align-items: center;
}

.table-tag {
  font-size: 11px;
}

.more-tags {
  font-size: 11px;
  color: #999;
}

.table-rating {
  font-size: 12px;
}

.download-count {
  font-weight: 600;
  color: #409eff;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-avatar {
  font-size: 10px;
}

.table-actions {
  display: flex;
  gap: 6px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.template-pagination {
  background: #fff;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 
    0 4px 16px rgba(0,0,0,0.06),
    0 1px 4px rgba(0,0,0,0.04);
}

/* 预览对话框 */
.preview-dialog {
  border-radius: 16px;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.preview-info h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.preview-info p {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.preview-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.download-info {
  font-size: 13px;
  color: #999;
}

.preview-image-container {
  text-align: center;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
}

.preview-full-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.preview-details h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #666;
}

.feature-list li .el-icon {
  color: #67c23a;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .template-list-page {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .filter-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .view-controls {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .template-list-page {
    padding: 12px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .filter-controls {
    gap: 12px;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .filter-select {
    min-width: 200px;
  }
  
  .stats-content {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .template-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .preview-dialog {
    width: 95% !important;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
